<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 480px;
            margin: 50px auto;
        }

        .wrap .nav {
            width: 480px;
            overflow: hidden;
            text-align: center;
            line-height: 40px;

        }

        .wrap .nav li {
            float: left;
            width: 80px;
            border: 1px solid #333;
            box-sizing: border-box;
        }

        .wrap .nav li+li {
            border-left: 0;
        }
        .wrap .nav .active{
            background-color: aquamarine;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="nav">
            <li>link_01</li>
            <li>link_02</li>
            <li>link_03</li>
            <li>link_04</li>
            <li>link_05</li>
            <li>link_06</li>
        </div>
    </div>
</body>
<script>
    var liList = document.querySelectorAll(".nav li");
    console.log(liList);

   /*  
   liList[0].onclick = function () {

        // liList[0].style.backgroundColor = "#6ff";
        // liList[0].style.color = "#fff";

        liList[0].setAttribute("class","active");
    }
    liList[1].onclick = function () {
        liList[1].setAttribute("class","active");
    }
    liList[2].onclick = function () {
        liList[2].setAttribute("class","active");
    } */

    // 多元素循环绑的事件的问题?
    // (1) 页面加载时,只是循环绑定事件,事件不会触发 => 循环结束后:li是最后一个li(<li>link_06</li>),i是不满足条件的第一个元素6
    // (2) 点击事件肯定发生在页面加载之后,此时点击元素后,执行事件函数中的代码 => 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) =>  全局作用于此时的li和i:  <li>link_06</li>  6
    
    debugger;  // 页面加载时
    for(var i=0;i<liList.length;i++){
        var li = liList[i];
        // 此处在页面加载时,只是绑定事件  => 事件不会触发
        li.onclick = function(){
            debugger; // 点击时执行
            // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) =>  全局作用于此时的li和i:  <li>link_06</li>  6
            li.setAttribute("class","active");
            console.log(li,i);
        }
    }
    console.log("循环结束后",li,i);


</script>

</html>